<template>
  <div class="vote-success" :style="{height: successVodalHeight}">
    <div class="bg-ranking">{{ranking}}</div>
    <div class="vote-success-header">
      <img src="../assets/vote-success-header.png" alt="">
    </div>
    <div class="vote-title-text">投票数</div>
    <div class="vote-success-count">{{votes}}</div>
    <div class="vote-success-img" :style="{'background-image': 'url('+img+')'}"></div>
    <div class="vote-success-name-box">
      <img src="../assets/trophy-1.png" alt="" v-if="ranking===1">
      <img src="../assets/trophy-2.png" alt="" v-if="ranking===2">
      <img src="../assets/trophy-3.png" alt="" v-if="ranking===3">
      <span class="top10-ranking" v-if="ranking>3&&ranking<11">{{ranking}}</span>
      <span class="other-ranking" v-if="ranking>10">第{{ranking}}.</span>
      <span class="vote-success-name">{{name}}</span>
    </div>
    <div class="vote-success-info">投票行业：{{catName}}</div>
    <div class="vote-success-info">投票时间：{{voteTime}}</div>
    <div class="copy-url">
      <span class="url" ref="urlText">{{url}}</span>
      <span class="btn copy-url-btn" @click="onCopy">点击复制</span>
    </div>
  </div>
</template>

<script>
import { copy } from '../../../common/utils'
import { accessLog } from '../../../common/dataBuried'
export default {
  props: {
    votes: {
      type: Number, // 投票数
      default: 0
    },
    img: { // 企业logo
      type: String,
      default: ''
    },
    ranking: { // 排名
      type: Number,
      default: 0
    },
    name: { // 企业名称
      type: String,
      default: ''
    },
    catName: { // 行业
      type: String,
      default: ''
    },
    voteTime: { // 投票时间
      type: String,
      default: ''
    },
    catid: { // 行业id
      type: String,
      default: ''
    }
  },
  computed: {
    url() {
      return window.location.protocol + '//' + window.location.host + '/?catid=' + this.catid + '&cfrom=BF1GU&ctype=1'
    },
    successVodalHeight() {
      if (this.name.length <= 12) {
        return 8.1 + 'rem'
      } else if (this.name.length <= 24) {
        return 8.4 + 'rem'
      } else {
        return 8.7 + 'rem'
      }
    }
  },
  methods: {
    onCopy() {
      copy(this.$refs.urlText)
      this.$toast.center('复制成功')
      accessLog('BF1GU')
    }
  }
}
</script>

<style scoped lang="scss">
.vote-success {
  position: relative;
  width: 6rem;
  height: 8.1rem;
  background: #fff center no-repeat;
  background-size: 100% 100%;
  background-image: url(../assets/vote-success-bg.png);
  .bg-ranking {
    position: absolute;
    width: 100%;
    font-size: 2.5rem;
    line-height: 2.5rem;
    text-align: center;
    color: #c4b77c;
    opacity: 0.15;
    bottom: 1.7rem;
  }
  .vote-success-header {
    padding-top: 0.64rem;
    text-align: center;
    img {
      height: 0.38rem;
      width: auto;
    }
  }
  .vote-title-text {
    margin-top: 0.3rem;
    font-size: 0.24rem;
    line-height: 0.24rem;
    color: #bababa;
    text-align: center;
  }
  .vote-success-count {
    margin-top: 0.1rem;
    font-size: 0.54rem;
    line-height: 0.54rem;
    font-weight: 700;
    color: #fc7508;
    text-align: center;
  }
  .vote-success-img {
    margin: 0.3rem auto 0;
    width: 2.4rem;
    height: 1.4rem;
    background: center no-repeat;
    background-size: contain;
  }
  .vote-success-name-box {
    // width: 80%;
    margin: 0.36rem auto 0.56rem;
    text-align: center;
    img {
      vertical-align: middle;
    }
    span {
      vertical-align: middle;
    }
  }
  .vote-success-name {
    max-width: 4rem;
    display: inline-block;
    font-size: 0.36rem;
    line-height: 0.42rem;
    color: #444;
    font-weight: 700;
    margin-left: 0.3rem;
    vertical-align: middle;
    text-align: left;
  }
  .top10-ranking {
    display: inline-block;
    width: 0.64rem;
    height: 0.64rem;
    text-align: center;
    line-height: 0.64rem;
    background: url(../assets/vote-success-ranking-bg.png) center no-repeat;
    background-size: contain;
    color: #b9ad73;
    font-size: 0.33rem;
    font-weight: 700;
  }
  .other-ranking {
    font-size: 0.33rem;
    line-height: 0.33rem;
    color: #333;
    font-weight: 700;
  }
  .vote-success-info {
    width: 3.96rem;
    margin: 0 auto 0.2rem;
    font-size: 0.25rem;
    line-height: 0.25rem;
    color: #666;
  }
  .copy-url {
    display: flex;
    width: 4.6rem;
    height: 0.56rem;
    line-height: 0.56rem;
    border-radius: 0.28rem;
    overflow: hidden;
    margin: 0.3rem auto 0;
    position: inherit;
  }
  .copy-url-btn {
    width: 1.4rem;
    min-width: 1.4rem;
    background-color: #739efb;
    font-size: 0.24rem;
  }
  .url {
    flex-grow: 1;
    background-color: #f1f5ff;
    padding: 0 0.25rem;
    font-size: 0.24rem;
    overflow: hidden;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #666;
  }
}
</style>
